<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${title}">电商信息采集对比</title>
    <link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
    <!-- 标签页图标 -->
    <link rel="shortcut icon" href="/images/icon/menu_title_1.jpg" type="image/x-icon" />
</head>
<script src="/js/layui/layui.all.js" charset="utf-8"></script>
<script src="/js/jquery.js" charset="utf-8"></script>
<script src="/js/localStorage.js" charset="utf-8"></script>
<span style="color: red;">当前信息展示页详情链接：</span><a id="infoList" href="#" target="_blank"></a>
<table class="layui-table">
    <colgroup>
        <col width="150">
        <col width="200">
        <col>
    </colgroup>
    <thead>
    <tr>
        <th>序号</th>
        <th>主图(webp格式图片，可使用Google查看)</th>
        <th>标题</th>
        <th>店铺名称</th>
        <th>售价</th>
        <th>付款人数</th>
        <th>发货地</th>
        <th>商家连接</th>
    </tr>
    </thead>
    <tbody id="tbody">
    </tbody>
</table>
<input id="category" type="hidden" th:src="${category}"/>
<input id="shopId" type="hidden" th:src="${shopId}"/>
</body>

<script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function () {
        var element = layui.element;
        element.init();
        //…
    });

    $(function () {
        list();
    });


    function list() {
        $.ajax({
            url: serverURL + "/collector/itemList",
            type: "GET",
            async: true,
            data: {
                category: $("#category").attr("src"),
                shopId: $("#shopId").attr("src")
            },
            success: function (data) {
                console.log(data);
                if (data.data == null) {
                    layer.msg(data.meta);
                    return;
                }
                var dataList = data.data.comparisonInfoDtoList;
                $("#infoList").text(data.data.url);
                $("#infoList").attr("href", data.data.url);

                for (var i = 0; i < dataList.length; i++) {
                    var currentData = dataList[i];
                    //加载图片
                    var imgElement = getJointElement("<div id='layui-img-",
                        i + 1,
                        "' class='layer-photos-demo'>"
                    );
                    //解决浏览器不兼容优化图片的方案 .replace("_.webp","")
                    var colorImage = currentData.img.replace("_.webp", "");
                    var colorImage_big = colorImage.replace("220x220", "800x800");
                    imgElement += getJointElement(
                        "<img layer-src='",
                        colorImage_big,
                        "' src='",
                        colorImage,
                        "' alt='图片-",
                        1,
                        "'> "
                    );
                    imgElement += "</div>";
                    var trList = getJointElement("<tr>",
                        "<td>",
                        i + 1,
                        "</td>",
                        "<td>",
                        /* "<img src='",
                         currentData.colorImageList[0],
                         "' />",*/
                        imgElement,
                        "</td>",
                        "<td>",
                        currentData.title,
                        "</td>",
                        "<td>",
                        currentData.shop,
                        "</td>",
                        "<td>",
                        currentData.price,
                        "</td>",
                        "<td>",
                        currentData.dealCnt,
                        "</td>",
                        "<td>",
                        currentData.location,
                        "</td>",
                        "<td>",
                        getJointElement("<a target='_blank' href='", currentData.url, "' >", currentData.url, "</a>")
                        ,
                        "</td>",
                        "</tr>");
                    $("#tbody").append(trList);
                    //加载相册模块
                    //查看图片
                    layer.photos({
                        photos: '#layui-img-' + (i + 1)
                        , anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
                    });
                }

            },
            error: function (e) {
                console.log(e)
            }
        });
    }

</script>
</html>